<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>题库统计分析</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            easy: '#52C41A',      // 简单难度 - 绿色
            medium: '#FAAD14',    // 中等难度 - 橙色
            hard: '#FF4D4F',      // 困难难度 - 红色
            objective: '#1890FF', // 客观题 - 蓝色
            subjective: '#722ED1' // 主观题 - 紫色
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-thin {
        scrollbar-width: thin;
      }
      .scrollbar-thin::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }
      .scrollbar-thin::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.5);
        border-radius: 2px;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <h1 class="text-xl font-bold text-primary flex items-center">
                    <i class="fa fa-database mr-2"></i>
                    <span>题库管理系统</span>
                </h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">题库管理</a>
                <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">数据统计</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">分析报告</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">系统设置</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索题目、知识点..." 
                           class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <div class="flex items-center space-x-2 cursor-pointer group">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                    <span class="hidden md:inline font-medium">管理员</span>
                    <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6 lg:py-8">
        <!-- 面包屑导航 -->
        <div class="flex items-center text-sm text-gray-500 mb-6">
            <a href="#" class="hover:text-primary">首页</a>
            <i class="fa fa-angle-right mx-2 text-gray-300"></i>
            <span class="text-primary font-medium">题库统计分析</span>
        </div>
        
        <!-- 统计概览卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">总题目数量</p>
                        <p class="text-3xl font-bold mt-1">2,548</p>
                        <p class="text-green-500 text-xs mt-1 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 较上月增长 8.2%
                        </p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                        <i class="fa fa-question-circle text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">知识点覆盖率</p>
                        <p class="text-3xl font-bold mt-1">92.7%</p>
                        <p class="text-green-500 text-xs mt-1 flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i> 较上月增长 3.5%
                        </p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                        <i class="fa fa-list-alt text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">题目难度分布</p>
                        <p class="text-3xl font-bold mt-1">中: 54%</p>
                        <p class="text-gray-500 text-xs mt-1">易: 28% | 难: 18%</p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-600">
                        <i class="fa fa-balance-scale text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">更新频率</p>
                        <p class="text-3xl font-bold mt-1">126/周</p>
                        <p class="text-red-500 text-xs mt-1 flex items-center">
                            <i class="fa fa-arrow-down mr-1"></i> 较上月减少 4.1%
                        </p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                        <i class="fa fa-refresh text-xl"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 图表分析区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            <!-- 难度分布图表 -->
            <div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-bold text-gray-800">题目难度分布</h3>
                    <div class="flex space-x-2">
                        <button class="text-sm px-3 py-1 bg-primary/10 text-primary rounded-full">周</button>
                        <button class="text-sm px-3 py-1 bg-gray-100 text-gray-500 rounded-full">月</button>
                        <button class="text-sm px-3 py-1 bg-gray-100 text-gray-500 rounded-full">年</button>
                    </div>
                </div>
                
                <div class="h-80">
                    <canvas id="difficultyDistribution"></canvas>
                </div>
            </div>
            
            <!-- 题型占比图表 -->
            <div class="bg-white rounded-xl shadow-sm p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-bold text-gray-800">题型分布</h3>
                    <button class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-ellipsis-v"></i>
                    </button>
                </div>
                
                <div class="h-80 flex items-center justify-center">
                    <canvas id="questionTypeChart"></canvas>
                </div>
                
                <div class="mt-4 grid grid-cols-2 gap-2">
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-objective mr-2"></div>
                        <span class="text-sm text-gray-600">客观题</span>
                        <span class="ml-auto font-medium">68%</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-subjective mr-2"></div>
                        <span class="text-sm text-gray-600">主观题</span>
                        <span class="ml-auto font-medium">32%</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 知识点与更新趋势 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            <!-- 知识点覆盖图表 -->
            <div class="bg-white rounded-xl shadow-sm p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-bold text-gray-800">知识点覆盖度</h3>
                    <button class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-ellipsis-v"></i>
                    </button>
                </div>
                
                <div class="h-64">
                    <canvas id="knowledgePointChart"></canvas>
                </div>
                
                <div class="mt-4 text-sm text-gray-500">
                    <p>函数与几何知识点覆盖较全面，概率统计需补充</p>
                </div>
            </div>
            
            <!-- 题库更新趋势 -->
            <div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-bold text-gray-800">题库更新趋势</h3>
                    <div class="flex space-x-2">
                        <button class="text-sm px-3 py-1 bg-primary/10 text-primary rounded-full">近3月</button>
                        <button class="text-sm px-3 py-1 bg-gray-100 text-gray-500 rounded-full">近6月</button>
                        <button class="text-sm px-3 py-1 bg-gray-100 text-gray-500 rounded-full">全年</button>
                    </div>
                </div>
                
                <div class="h-64">
                    <canvas id="updateTrendChart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- 题目详情表格 -->
        <div class="bg-white rounded-xl shadow-sm mb-6 overflow-hidden">
            <div class="border-b px-5 py-4 flex items-center justify-between">
                <h3 class="font-bold text-gray-800">题目详情</h3>
                <div class="flex items-center space-x-3">
                    <div class="relative">
                        <input type="text" placeholder="搜索题目..." 
                               class="pl-8 pr-4 py-2 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    
                    <select class="bg-gray-100 border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                        <option>全部题型</option>
                        <option>单选题</option>
                        <option>多选题</option>
                        <option>判断题</option>
                        <option>填空题</option>
                        <option>解答题</option>
                    </select>
                    
                    <select class="bg-gray-100 border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                        <option>全部难度</option>
                        <option>简单</option>
                        <option>中等</option>
                        <option>困难</option>
                    </select>
                </div>
            </div>
            
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题目内容</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">知识点</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题型</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">难度</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">正确率</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">T-1001</td>
                            <td class="px-6 py-4 max-w-xs truncate">已知集合A={1,2,3}，集合B={2,3,4}，求A∩B...</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">集合运算</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">单选题</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">简单</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">82%</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary hover:text-primary/80">
                                <a href="#" class="mr-3">查看</a>
                                <a href="#" class="mr-3">编辑</a>
                                <a href="#" class="text-gray-400 hover:text-red-500">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">T-1002</td>
                            <td class="px-6 py-4 max-w-xs truncate">已知函数f(x)=x²+2x+1，求f(x)的最小值...</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">函数极值</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">解答题</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-orange-100 text-orange-800 rounded-full">中等</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">65%</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary hover:text-primary/80">
                                <a href="#" class="mr-3">查看</a>
                                <a href="#" class="mr-3">编辑</a>
                                <a href="#" class="text-gray-400 hover:text-red-500">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">T-1003</td>
                            <td class="px-6 py-4 max-w-xs truncate">已知抛物线y=ax²+bx+c经过点(1,3)，(2,5)，(3,9)，求a,b,c的值...</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">二次函数</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">解答题</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">困难</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">41%</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary hover:text-primary/80">
                                <a href="#" class="mr-3">查看</a>
                                <a href="#" class="mr-3">编辑</a>
                                <a href="#" class="text-gray-400 hover:text-red-500">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">T-1004</td>
                            <td class="px-6 py-4 max-w-xs truncate">已知向量a=(1,2)，向量b=(3,4)，求a·b...</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">向量运算</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">单选题</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">简单</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78%</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary hover:text-primary/80">
                                <a href="#" class="mr-3">查看</a>
                                <a href="#" class="mr-3">编辑</a>
                                <a href="#" class="text-gray-400 hover:text-red-500">删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">T-1005</td>
                            <td class="px-6 py-4 max-w-xs truncate">已知随机变量X服从正态分布N(0,1)，求P(X>1)的值...</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">概率统计</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">解答题</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">困难</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32%</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-primary hover:text-primary/80">
                                <a href="#" class="mr-3">查看</a>
                                <a href="#" class="mr-3">编辑</a>
                                <a href="#" class="text-gray-400 hover:text-red-500">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="px-5 py-4 border-t flex items-center justify-between">
                <p class="text-sm text-gray-500">显示 1 至 5 条，共 2,548 条</p>
                <div class="flex space-x-1">
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-500 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        <i class="fa fa-chevron-left text-xs"></i>
                    </button>
                    <button class="px-3 py-1 border border-primary bg-primary text-white rounded-md">1</button>
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50">2</button>
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50">3</button>
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50">...</button>
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50">509</button>
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-500 bg-white hover:bg-gray-50">
                        <i class="fa fa-chevron-right text-xs"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="text-gray-500 text-sm mb-4 md:mb-0">
                    <p>© 2025 题库管理系统. 保留所有权利.</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary">
                        <i class="fa fa-file-text-o mr-1"></i> 使用条款
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary">
                        <i class="fa fa-shield mr-1"></i> 隐私政策
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 难度分布图表
        new Chart(document.getElementById('difficultyDistribution'), {
            type: 'bar',
            data: {
                labels: ['简单', '中等', '困难'],
                datasets: [
                    {
                        label: '题目数量',
                        data: [713, 1376, 459],
                        backgroundColor: [
                            'rgba(82, 196, 26, 0.6)',  // 简单 - 绿色
                            'rgba(250, 173, 20, 0.6)', // 中等 - 橙色
                            'rgba(255, 77, 79, 0.6)'   // 困难 - 红色
                        ],
                        borderColor: [
                            'rgba(82, 196, 26, 1)',
                            'rgba(250, 173, 20, 1)',
                            'rgba(255, 77, 79, 1)'
                        ],
                        borderWidth: 1
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '题目数量'
                        }
                    }
                }
            }
        });
        
        // 题型分布图表
        new Chart(document.getElementById('questionTypeChart'), {
            type: 'doughnut',
            data: {
                labels: ['单选题', '多选题', '判断题', '填空题', '解答题'],
                datasets: [{
                    data: [850, 320, 420, 210, 748],
                    backgroundColor: [
                        'rgba(24, 144, 255, 0.7)',  // 蓝色
                        'rgba(114, 46, 209, 0.7)',  // 紫色
                        'rgba(250, 173, 20, 0.7)',  // 橙色
                        'rgba(82, 196, 26, 0.7)',   // 绿色
                        'rgba(255, 77, 79, 0.7)'    // 红色
                    ],
                    borderColor: [
                        'rgba(24, 144, 255, 1)',
                        'rgba(114, 46, 209, 1)',
                        'rgba(250, 173, 20, 1)',
                        'rgba(82, 196, 26, 1)',
                        'rgba(255, 77, 79, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20
                        }
                    }
                },
                cutout: '70%'
            }
        });
        
        // 知识点覆盖图表
        new Chart(document.getElementById('knowledgePointChart'), {
            type: 'radar',
            data: {
                labels: ['集合与逻辑', '函数', '几何', '数列', '概率统计', '导数'],
                datasets: [{
                    label: '知识点覆盖度',
                    data: [95, 90, 88, 85, 75, 82],
                    backgroundColor: 'rgba(22, 93, 255, 0.2)',
                    borderColor: 'rgba(22, 93, 255, 1)',
                    pointBackgroundColor: 'rgba(22, 93, 255, 1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(22, 93, 255, 1)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    r: {
                        angleLines: {
                            display: true
                        },
                        suggestedMin: 0,
                        suggestedMax: 100
                    }
                }
            }
        });
        
        // 更新趋势图表
        new Chart(document.getElementById('updateTrendChart'), {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [
                    {
                        label: '新增题目',
                        data: [180, 210, 190, 240, 220, 195],
                        borderColor: 'rgba(22, 93, 255, 1)',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: '修改题目',
                        data: [120, 140, 160, 130, 150, 145],
                        borderColor: 'rgba(250, 173, 20, 1)',
                        backgroundColor: 'rgba(250, 173, 20, 0.1)',
                        fill: true,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '题目数量'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>
